<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./js/showLoading/showLoading.css" rel="stylesheet" media="screen" />
</head>

<body>
<div id="qrcodeCanvas" style="position: absolute;left:-2000px">123</div>
<!--海报图画布-->
<canvas id="myCanvas" style="position: absolute;right:-2000px"></canvas>
<!--展示海报-->
<div class="showPoster">
        <img id="showImg" />
        <!-- <div style="width:100%;height:100px">长按图片保存到手机相册</div> -->
</div>
<script type="text/javascript" src="./js/jquery.js"></script>
<script src="./js/showLoading/jquery.showLoading.min.js"></script>
<script src="./js/showLoading/jquery.showLoading.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<script type="text/javascript">
    var qrcodeImg    //二维码img
    shareImg();
    function shareImg(){
        $('#showImg').showLoading('图片生成中...');
        //移除已生成的避免重复(必须！)
        $('#qrcodeCanvas').html("");
        var qrcode = new QRCode('qrcodeCanvas', {
            text: 'http://www.test.com/img/index/index.html',
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        });
        qrcodeImg = $("#qrcodeCanvas img")[0]
        qrcodeImg.crossOrigin = "anonymous"

        //这里必须用onload 二维码是异步生成，异步的意思不用多说吧？
        qrcodeImg.onload = function() {
            //画海报
            beginDraw()
        }
    }
    function beginDraw(){
        //画海报
        var width  = 750
        var height = 1200
        var c      = document.getElementById("myCanvas");
        c.width    = width
        c.height   = height
        var ctx    = c.getContext("2d");
        //首先画上背景图

        //注意：H5中任何图片写入画布都是以img 例如（<img src="123.png">）,以下代码console.log() 出来就是它
        var img = new Image();
        img.src = 'http://www.test.com/car/image/640.jpg';
        img.crossOrigin = "anonymous"
        // 加载完成执行
        //写入文本必须重新定义颜色，否则会被覆盖
        //填充颜色
        ctx.fillStyle ="#fff";
        ctx.fillRect(0,0,width,height);
        //写入文字
        ctx.fillStyle ="#000";
        ctx.font ="30px 微软雅黑";
        ctx.fillText("长按识别二维码",300,height-60);
        ctx.fillText("放松放松个",100,height-60);
        ctx.fillText("是的发顺丰",100,height-60);
        img.onload = function() {
            //画入背景图
            ctx.drawImage(img,0,0,width,height);
            //画入二维码
            ctx.drawImage(qrcodeImg,50,height-120,100,100);
            ctx.font ="30px 微软雅黑";
            ctx.fillText("放松放松个",0,60);
            ctx.font ="60px 微软雅黑";
            ctx.fillText("wjp",300,560);
            //绘制完成,转为图片
            setTimeout(function() {
                base64_path = c.toDataURL("image/jpeg",1);
                $('#showImg').attr('src',base64_path)
                $('#showImg').hideLoading();
                $('.mask').show()
                $('.showPoster').show()
            },100)
        }
    }
</script>
</body>
</html>
